Note: Setting CSS does work around it, but I'd rather have the mark up just be correct out-of-the-box.

Looks like this is an upstream issue (tested it in a non-gatsby project just to be sure). It also doesn't seem to respect the viewBox: false option as specified in the svgr docs.

@neoziro any thoughts on this?

I think this is because options are passed using query string. Is it possible to provide options using an object instead?

Thanks @neoziro. Unfortunately, webpack-configurator only supports query.

Adding options in the loader config throws:

There were errors with your webpack config:
[1]
module.loaders.7.options
object.allowUnknown , "options" is not allowed

Gatsby v2 no longer depends on webpack-configurator, but until it becomes available (which could be a while) we can't use options. Is there any way SVGR could handle options passed in via query?

Is it possible to pass false and true using query?

I think yes because this is what I get with the options: { ref: true, icon: true, viewBox: false }

 return React.createElement("svg", _extends({
    fill: "none",
    stroke: "currentColor",
    strokeWidth: 2,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    className: "feather feather-search"
  }, props, {
    width: "1em",
    height: "1em",
    ref: svgRef
  }), _ref2, _ref3);
};

Everything is okay. I was also mistaken when I said it wasn't respecting viewBox: false because its been removed.

Also, when I do

<SearchIcon viewBox="0 0 12 12" width="4em" height="4em" />

I get

<svg viewBox="0 0 12 12" width="1em" height="1em">

Other options like { dimensions: false } are also handled properly. So its definitely a problem with width and height

I'm taking a look at SVR's source to see if I can track it down.

After further investigation, I believe this is a bug with how svgr does the transforms. I edited the webpack.test.js to use query strings instead of objects and it seems to be getting the options correctly.

Even with the cli, --no-icon flag will result in the following component:

 <svg viewBox="0 0 88 88" {...props} width="1em" height="1em">

The width and height attrs are inserted after the rest props are spread which is why we can't override it.

Resolved in svgr 1.9.1.

Thanks @neoziro